<template>
	<view>
		<view class="bg">
			<u-navbar class="bar" :is-back="false" title="企大咖微名片" title-color="#fff" :border-bottom="false" :background="background"></u-navbar>
		</view>

		<NewCard v-if="!myCard" />

		<MyCard v-if="myCard.id" :card="myCard" />

		<view class="block" v-show="dynamic.length">
			<view class="block-title">名片动态</view>

			<view class="card-list">
				<dynamic v-for="i in dynamic" :value="i" :key="i.id"></dynamic>
			</view>
		</view>
	</view>
</template>

<script>
	import MyCard from './components/my-card.vue'
	import NewCard from './components/new-card.vue'
	import dynamic from './components/dynamic.vue'
	export default {
		components: {
			MyCard,
			NewCard,
			dynamic
		},
		data() {
			return {
				scrollTop: 0,
				background: {
					background: "url('http://v2.qidka.com/storage/vcard/topbg.png')",
					backgroundPosition: 'left 0',
					backgroundSize: '100% auto'
				},
				myCard: true,
				dynamic: []
			};
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		onLoad() {

		},
		onShow() {
			if (!this.$store.state.token) {
				this.$goto('/pages/other/loading')
			} else {
				this.getMyCard()
				this.getDynamic()
			}
		},
		onPullDownRefresh() {
			if (!this.$store.state.token) {
				this.$goto('/pages/other/loading')
			} else {
				this.getMyCard()
				this.getDynamic()
			}
		},
		methods: {
			async getMyCard() {
				let res = await this.$u.get('/myvcard')
				let {
					code,
					msg,
					result
				} = res.data

				if (code == 10001 || code == 20001) {
					this.myCard = false
				} else if (code == 0) {
					this.myCard = res.data.result.my_card
				}
				uni.stopPullDownRefresh()
			},
			async getDynamic() {
				let res = await this.$u.get('/myvcard/dynamic')
				let {
					dynamic
				} = res.data.result
				this.dynamic = dynamic
			}
		}
	}
</script>

<style lang="scss">
	.bg {
		width: 750rpx;
		height: 500rpx;
		background: url('http://v2.qidka.com/storage/vcard/topbg.png');
		background-size: cover;
	}



	.block {
		width: 700rpx;
		margin: 16rpx auto;

		.block-title {
			font-size: 30rpx;
			font-weight: bold;
			color: #333333;
			margin: 24rpx auto;
		}
	}
</style>
